<template>
	<view class="tabs">
		<view class="tabs_title">
			<view v-for="(item,index) in tabs" :key="index" class="title_item "
				:bindtap="handleItemTap" :data-index="index">
				{{item.value}}
			</view>
		</view>
		<view class="tabs_content">
			<slot></slot>
		</view>
	</view>
</template>


<script>
	const app = getApp();
	export default {
		data() {
			return {}
		},
		props: {
			tabs: {
				type: Array,
				value: []
			}
		},
		methods: {
			handleItemTap(e) {
				// 1. 获取点击的索引
				const {index} = e.currentTarget.dataset;
				// 2. 触发父组件中的事件
				this.triggerEvent("tabsItemChange", {
					index
				});
			}
		},
	}
</script>

<style>
	.tabs {}

	.tabs_title {
		display: flex;
	}

	.title_item {
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 15rpx 0;
		flex: 1;
		font-size: 12px;
	}

	.active {
		color: red;
		border-bottom: 5rpx solid red;
	}

	.tabs_content {}
</style>